<template>
  <div id="template">
    <div class="left">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in paneList" :label="item.label" :name="item.name" :key="index">
        </el-tab-pane>
      </el-tabs>
      <div class="sss">
        <div v-for="(item, index) in 6" :id="&quot;sparkLine&quot; + index" :key="index" class="sss-1"></div>
      </div>
      <div class="bottom">
        <div class="btnList">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="模板合并" class="littleBtn">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="模板分离" class="littleBtn">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="模板删除" class="littleBtn">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="模板直方图" class="littleBtn">
        </div>
        <div class="btnList">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="室上早二次分析" class="littleBtn">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="全天直方图" class="littleBtn">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="RR间期时间分布散点图" class="littleBtn">
          <img src="./../../../assets/resource/ecg/sync.png" alt="" title="RR间期洛伦茨散点图" class="littleBtn">
        </div>
      </div>
    </div>
    <div class="right">
      <div class="bottom">
        <div v-for="(item, index) in 36" :key="index" :id="&quot;genre&quot; + index" class="genre"></div>
      </div>
      <div class="btnGroup">
        <div>
          <span>{{ options[radio].label }}</span>
          <el-button size="small" style="margin-right: 10px;" @click="dialogVisible = true">选择导联</el-button>
          <el-checkbox v-model="checked">样本单波显示</el-checkbox>
        </div>
        <div class="b-right">
          <el-button size="small">保存片段图</el-button>
          <el-button size="small">保存</el-button>
          <el-button size="small">全选</el-button>
          <el-button size="small">页选</el-button>
          <el-button size="small">反选</el-button>
          <el-button size="small">清空</el-button>
        </div>
      </div>
      <div v-if="showStandardEcg" class="top">
        <ecg-chart 
          ref = "ecgChart"
          :width-value="ecgWidthValue" 
          :height-value="ecgHeightValue"
        ></ecg-chart>
      </div>
      <div v-if="showStandardEcg" class="btnGroup">
        <div class="b-left">
          <div>
            <img src="./../../../assets/resource/ecg/step-backward.png" alt="" title="最前" class="littleBtn">
            <img src="./../../../assets/resource/ecg/caret-left.png" alt="" title="前一页" class="littleBtn">
            <img src="./../../../assets/resource/ecg/caret-left.png" alt="" title="前一秒" class="littleBtn">
            <img src="./../../../assets/resource/ecg/caret-right.png" alt="" title="后一秒" class="littleBtn">
            <img src="./../../../assets/resource/ecg/caret-right.png" alt="" title="后一页" class="littleBtn">
            <img src="./../../../assets/resource/ecg/step-forward.png" alt="" title="最后" class="littleBtn">
          </div>
          <span></span>
          <el-button size="small">转到</el-button>
          <el-button size="small">基线上移</el-button>
          <el-button size="small">基线下移</el-button>
        </div>
        <div class="b-right">
          <el-button size="small" @click="hideStandardEcg">隐藏</el-button>
        </div>
      </div>
      <div v-if="!showStandardEcg">
        <el-button size="small" class="fullBtn" @click="toShowStandardEcg">点击此处显示标准心电图</el-button>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      title="选择导联"
      width="560px">

      <div class="five copy">
        <el-radio-group v-model="radio" class="leadList">
          <el-radio v-for="(item, index) in options" :label="item.value" :key="index" class="item">{{ item.label }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Papa from 'papaparse'
// import * as samplesData from './ss';
import * as samplesData from './../../../../public/js/ss'
var Highcharts = require('highcharts')
import EcgChart from '@/components/ecgChart'

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      showStandardEcg: false,
      paneList: [{
        label: 'V',
        name: '1'
      }, {
        label: 'S',
        name: '2'
      }, {
        label: 'A',
        name: '3'
      }, {
        label: 'N',
        name: '4'
      }],
      activeName: '1',
      tableData: [{
        date: '2014-04-23 19:52:46',
        continued: '20.31',
        AvgHR: 76
      }, {
        date: '2014-04-23 19:52:45',
        continued: '31.23',
        AvgHR: 89
      }, {
        date: '2014-04-23 19:52:44',
        continued: '16.31',
        AvgHR: 11
      }, {
        date: '2014-04-24 06:52:46',
        continued: '8.31',
        AvgHR: 22
      }],
      options: [{
        label: 'I',
        value: 0
      }, {
        label: 'II',
        value: 1
      }, {
        label: 'III',
        value: 2
      }, {
        label: 'aVR',
        value: 3
      }, {
        label: 'aVL',
        value: 4
      }, {
        label: 'aVF',
        value: 5
      }, {
        label: 'V1',
        value: 6
      }, {
        label: 'V2',
        value: 7
      }, {
        label: 'V3',
        value: 8
      }, {
        label: 'V4',
        value: 9
      }, {
        label: 'V5',
        value: 10
      }, {
        label: 'V6',
        value: 11
      }],
      value: '',
      checkAll: false,
      isIndeterminate: true,

      checked: true,
      dialogVisible: false,
      checkList: ['I'],
      radio: '0',

      list: [],
      list1: [],
      list2: [],
      list2Value: 4,
      scaleValue: 16,
      ecgList: [{
        time: '10:48:41',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:48:55',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:09',
        name: 'aVF',
        data: this.list
      }],
      fecg_data: [],
      chart: undefined,
      genre: []
    }
  },
  created() {
    this.getData()
    this.$nextTick(() => {
      console.log(document.querySelector('#container1'))
      for (let i = 0; i < 36; i++) {
        this.createGenreChart(i)
      }
      // 左侧迷你图
      for (let i = 0; i < 6; i++) {
        this.createMiniChart(i)
      }
    })
  },
  methods: {
    toShowStandardEcg() {
      this.showStandardEcg = true
      const chartWidth = document.querySelector('.right').offsetWidth * 0.166 - 2
      const chartHeight = (window.innerHeight - 240) * 0.55 * 0.166
      for (let i = 0; i < 36; i++) {
        this.genre[i].setSize(chartWidth, chartHeight)
      }
      this.$nextTick(() => {
        this.ecgWidthValue = (window.innerWidth) - 10
        this.ecgHeightValue = (window.innerHeight - 240) * 0.45 / 3
      })
    },
    hideStandardEcg() {
      this.showStandardEcg = false
      const chartWidth = document.querySelector('.right').offsetWidth * 0.166 - 2
      const chartHeight = (window.innerHeight - 240) / 6
      for (let i = 0; i < 36; i++) {
        this.genre[i].setSize(chartWidth, chartHeight)
      }
    },
    createMiniChart(index) {
      // let widthValue = (window.innerWidth) * 0.1 - 16
      const widthValue = document.querySelector('.left').offsetWidth * 0.5 - 10
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart(`sparkLine${index}`, {
        chart: {
          backgroundColor: null,
          borderWidth: 0,
          type: 'spline',
          margin: [2, 0, 2, 0],
          width: widthValue,
          height: 120,
          style: {
            overflow: 'visible'
          },
          // small optimalization, saves 1-2 ms each sparkline
          skipClone: true
        },
        credits: {
          enabled: false
        },
        title: {
          text: 'test',
          align: 'left',
          floating: true,
          y: 10,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          labels: {
            enabled: false
          },
          title: {
            enabled: false
          },
          gridLineWidth: 0
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        series: [{
          data: [71, 78, 39, 66],
          enableMouseTracking: false
        }]
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleCheckAllChange(val) {
      const result = this.options.map(item => {
        return item.label
      })
      this.checkList = val ? result : []
      this.isIndeterminate = false
    },
    getData() {
      // debugger
      const data = Papa.parse(samplesData.samplesData).data
      var fecg_data = []
      for (var i = 2; i < data.length - 1; i++) {
        var item = data[i]
        var arr = []
        arr[0] = item[0].substring(0)
        arr[1] = item[1].substring(0)
        fecg_data[i] = arr
      }

      for (let k = 4; k < fecg_data.length - 1; k++) {
        var time = fecg_data[k]
        var time1 = time[0].trim().substring(3)
        var new_time = time1.split('.')
        fecg_data[k][0] = parseInt(new_time[0]) * 1000 + parseInt(new_time[1])
        fecg_data[k][1] = Number(fecg_data[k][1])
      }
      // console.log(fecg_data)
      this.fecg_data = fecg_data
      this.list = fecg_data.slice(4, fecg_data.length - 2)
      this.list1 = fecg_data.slice(4, 600)
      this.list2 = fecg_data.slice(4, 20)
      this.list2Value = 4
    },
    createGenreChart(index) {
      const that = this
      const widthValue1 = document.querySelector('.right').offsetWidth * 0.166 - 2
      const heightValue = (window.innerHeight - 240) / 6
      require('highcharts/modules/data')(Highcharts)
      this.genre[index] = Highcharts.chart(`genre${index}`, {
        chart: {
          type: 'spline',
          width: widthValue1,
          height: heightValue,
          backgroundColor: '#E7F2FF'
        },
        credits: {
          enabled: false
        },
        title: {
          text: index + 1,
          align: 'left',
          floating: true,
          y: 20,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          enableMouseTracking: false,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list1
            var data = [], i

            for (i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}

</script>

<style lang="scss" scoped>
    #template {
        width: 100%;
        height: 100%;
        display: flex;
        .copy {
            border: 1px solid #c0c4cc;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .left {
            flex: 0 0 20%;
            height: 100%;
            position: relative;
            .sss {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .sss-1 {
                    border: 1px solid #979797;
                    margin-bottom: 5px;
                }
            }
            .bottom {
                position: absolute;
                bottom: 0;
                width: 100%;
                .btnList {
                    border: 1px solid #979797;
                    padding: 10px;
                    margin: 6px;
                }
            }
        }
        .right {
            width: calc( 100% - 364px);
            width: 80%;
            padding-left: 10px;
            .bottom {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                .genre {
                    flex: 0 0 calc(16.6% - 2px);
                    border: 1px solid #979797;
                }
            }
            .btnGroup {
                display: flex;
                justify-content: space-between;
                padding: 10px;
                border: 1px solid #979797;
                span {
                    width: 60px;
                    padding: 9px 15px;
                    font-size: 12px;
                    border-radius: 3px;
                    display: inline-block;
                    line-height: 1;
                    white-space: nowrap;
                    border: 1px solid #DCDFE6;
                    color: #606266;
                    -webkit-appearance: none;
                    text-align: center;
                    margin-right: 10px;
                }
                .b-left {
                    display: flex;
                    align-items: end;
                }
            }
            .top {
                .container {
                    border: 1px solid #979797;
                }
            }
            .fullBtn {
                width: 100%;
                padding: 10px;
                margin-top: 10px;
            }
        }
        .littleBtn {
            width: 30px;
            height: 30px;
            border: 1px solid #979797;
            margin-right: 10px;
        }
        .el-dialog {
            .leadList {
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: 53px;
                    margin-top: 10px;
                    
                }
            }
            .five {
                .five-list-box {
                    display: flex;
                    flex-wrap: wrap;
                    .five-list {
                        margin-right: 10px;
                        .name {
                            font-size: 14px;
                            color: #4A4A4A;
                            text-align: left;
                            width: 120px;
                            display: inline-block;
                        }
                        .el-input {
                            width: 100px;
                        }
                    }
                }
            }
            .list {
                margin-top: 10px;
                .name {
                    font-size: 14px;
                    color: #4A4A4A;
                    text-align: left;
                    width: 100px;
                    display: inline-block;
                }
                .el-select {
                    width: 115px;
                }
            }
        }
    }
</style>



